<template>
  <div class="app-container">
    <avue-crud
      :data="data"
      :option="option"
      v-model="addObj"
      :page="page"
      @search-change="searchChange"
      @size-change="sizeChange"
      @current-change="currentChange"
      @row-save="submit"
      @row-update="edit"
      @row-de;ete="delRow"
    >
      <template slot-scope="scope" slot="menu">
        <el-button
          type="text"
          size="mini"
          icon="el-icon-delete"
          @click.native="delRow(scope)"
        >删除</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
    import {getList,add,edit,deleteType} from '@/api/equipmentTypeManagement'
    export default {
        name: "roleManagement",
        watch:{
            data() {
                // 对 Table 进行重新布局
                this.$nextTick(()=>{
                    this.$refs.crud.$refs.table.doLayout()
                })
            },
        },
        data() {
            return {
                addObj: {
                    attachs: [
                        {
                            fileName: "萨达",
                            time: "奥术大师"
                        }
                    ]
                },
                data: [],
                originPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 10,
                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 20,
                    layout: "total,pager,prev, next",
                },

                option: {
                    labelWidth:120,
                    labelPosition:"left",
                    dialogEscape: false,
                    dialogClickModal: false,
                    dialogWidth: 800,
                    height: "auto",
                    calcHeight: 100,
                    searchShow: true,
                    // excelBtn:true,
                    index: true,
                    indexLabel: "序号",
                    searchMenuSpan:6,
                    indexWidth: 100,
                    refreshBtn: false,
                    searchBtn: true,
                    columnBtn: false,
                    addBtn: true,
                    menu: true,
                    delBtn: false,
                    editBtn: true,
                    editBtnText: "修改",
                    align: "center",
                    addTitle: "登记",
                    column: [
                        {
                            label: "设备类型名",
                            prop: "typeName",
                        },
                        {
                            label: "级别",
                            prop: "grade",
                        },
                         {
                             label: '设备图片',
                             prop: 'img',
                             type: 'upload',
                             span: 24,
                             limit: 1,
                             propsHttp: {
                                  res:'data'
                             },
                             listType: 'picture-img',
                             action: '/api/equipmentType/img/upload'
                         },

                    ]
                },

            };
        },
        computed: {
        },
        methods: {
            initData() {
                this.page.pageNum=this.page.currentPage
                getList(this.page).then(res=>{
                    this.data = res.data.resultList;
                    this.page.total = res.data.total;
                })
            },
            searchChange(params, done) {
                console.log(params)
                this.page=this.originPage
                this.page={...this.page,...params}
                console.log(this.page)
                this.initData();
                done()
            },
            sizeChange(val) {
                this.page.currentPage = 1;
                this.page.pageSize = val;
                this.initData();
            },

            currentChange(val) {
                this.page.currentPage = val;
                this.initData();
            },
            submit(form, done) {
                console.log("addform");
                console.log(form);
                add(form).then(res=>{
                    console.log(res);
                    this.$message.success("新增设备类型成功")
                    this.initData();
                })
                done();
            },

            edit(row, index, done, loading) {
                console.log("editform");
                console.log(row);
                edit(row).then(res=>{
                    console.log(res);
                    this.$message.success("修改设备类型成功")
                    this.initData();
                })
                done()
            },
            delRow(scope){
                this.$confirm('此操作将永久删除该设备类型信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteType(scope.row.id).then(res=>{
                        this.initData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
        mounted() {
            this.initData()
            // this.initDic()


        },


        created() {

        },

    };
</script>

<style lang="scss">

</style>
